<template>
  <div class="whole">
    <a-layout id="components-layout-demo-top-side-2">
      <a-layout-header class="header">
        <div class="ADoris" @click="welCome">
          <div>
            <img src="../../../images/home/logo.png" alt="" />
          </div>
        </div>
        <div class="contraction"></div>
        <div class="backBut">
          <a-radio-group :value="size" @change="handleSizeChange">
            <a-radio-button value="large" @click="backButLucency">
              <img style="width:16px" :src="daytime" alt="">
            </a-radio-button>
            <a-radio-button value="default" @click="backButDark">
              <img style="width:16px" :src="night" alt="">
            </a-radio-button>
          </a-radio-group>
        </div>
        <div class="userMessage">
          <div class="userImgName" title="我的资料" @click="personalMessage">
            <div class="img">
              <img :src="imgUrl+userInfo.avatar?imgUrl+userInfo.avatar:userImg" alt="">
            </div>
            <div class="name">
              <span>{{userInfo.userName}}</span>
            </div>
          </div>
          <div class="userImg" title="退出" @click="quit">
          </div>
        </div>
      </a-layout-header>
      <a-layout :class="menuLeft">
        <div class="backgroundColor"></div>
        <div class="menuDiv">
          <!-- :selected-keys="[$route.path]" -->
          <a-menu
            :open-keys="openKeys"
            @openChange="onOpenChange"
            mode="inline"
            theme="dark"
            :inline-collapsed="collapsed"
            :selected-keys="[routerPath]"
            class="aMenu"
          >
            <template v-for="(item, index) in menuInfo">
              <a-menu-item
                :key="item.path"
                v-if="item.path != '/systemLayout'"
                class="aMenuItem"
                @click="parentClick(item.path)"
              >
                <!-- <a-icon type="inbox" /> -->
                <div class="menuIcon">
                  <!-- <img :src="item.path == $route.path ? item.icon2 :item.icon1" alt=""> -->
                  <img :src="item.path == routerPath ? item.icon2 :item.icon1" alt="">
                </div>
                <span>{{ item.menuName }}</span>
              </a-menu-item>
              <a-sub-menu
                class="aMenuItem1"
                :key="index"
                v-if="item.children.length != 0 && item.path == '/systemLayout'"
              >
                <span slot="title">
                  <a-icon v-if="menuLeft != 'menuDeaDolour'" class="aIcon" type="setting" theme="filled" />
                  <a-icon v-else class="aIcon" type="setting" theme="filled" style="color:#d0d0d0;" />
                  <span>{{ item.menuName }}</span>
                </span>
                <a-menu-item
                  class="aMenuItem"
                  v-for="item2 in item.children"
                  :key="item2.path"
                  @click="sonClick(item2.path)"
                >
                  {{ item2.menuName }}</a-menu-item
                >
              </a-sub-menu>
            </template>
          </a-menu>
        </div>
      </a-layout>
      <div :class="principal">
        <router-view class="routerView"></router-view>
      </div>
    </a-layout>
  </div>
</template>

<script>
import Vue from 'vue'
window.Event = new Vue()
import api from '../../api/MenuManagement/MenuManagement.js'
export default {
  name:'Home',
  data() {
    return {
      routerPath:'',
      userImg: require("../../../images/home/doctor.png"),
      collapsed: false,
      rootSubmenuKeys: [],
      openKeys: [],
      imgUrl: '',
      menuInfo: [],
      // menuLeft: this.$route.params.menuLeft,
      // principal: this.$route.params.principal,
      menuLeft: '',
      principal: '',
      size: 'large',
      userInfo:{},
      newArr1:[],
      newArr2:[],
      daytime: '',
      night: '',
    };
  },
  watch:{
    menuLeft:function(newval,oldval) {
      if(this.$route.params.menuLeft == 'menuLeft') {
        newval = 'menuLeft'
      }else if(this.$route.params.menuLeft == 'menuDeaDolour'){
        newval = 'menuDeaDolour'
      }
      window.Event.$emit('menuLeft', newval)
      this.$store.commit('menuLeft', newval)
      window.sessionStorage.setItem('menuLeft', newval)
      this.getMenuInfo(newval);
    },
    principal:function(newval,oldval) {
      if(this.$route.params.principal == 'principal') {
        newval = 'principal'
      }else if(this.$route.params.principal == 'prinDeaDolour'){
        newval = 'prinDeaDolour'
      }
      window.sessionStorage.setItem('principal', newval)
    },
    $route(newval,oldval) {
      this.routerPath = newval.path;
      if(newval.path == '/liveMessage') {
        this.routerPath = '/lives'
      }
      if(newval.path == '/showAll') {
        this.routerPath = '/welcome'
      }
      if(newval.path == '/details') {
        this.routerPath = '/welcome'
      }
      if(newval.path == '/searchContent') {
        this.routerPath = '/synthesis'
      }
    },
  },
  created() {
    let _this = this;
    this.imgUrl = this.$config.imgUrl;
  },
  mounted() {
    let _this = this;
    this.routerPath = this.$route.path;
    _this.getMenuInfo();
    _this.menuLeft = sessionStorage.getItem('menuLeft')
    _this.principal = sessionStorage.getItem('principal')
    if(_this.menuLeft != 'menuDeaDolour') {
      _this.size = 'large';
    }else {
      _this.size = 'default';
    }
    if(_this.size == 'large') {
        _this.backButLucency()
    }else {
        _this.backButDark()
    }
  },
  methods: {
    handleSizeChange(e) {
        this.size = e.target.value;
      },
    getMenuInfo(menuLeft) {
      let _this = this;
      // let userInfo = _this.$store.state.userInfo;
      // _this.userInfo = _this.$store.state.userInfo;
      let userInfo = JSON.parse(sessionStorage.getItem('userInfo'));
      _this.userInfo = JSON.parse(sessionStorage.getItem('userInfo'));
      api.menuGetList().then(res=>{
        if (res.code == 200) {
          let permissions = userInfo.permissions;
          let newArr = [];
          for (let i = 0; i < res.data.length; i++) {
            for (let j = 0; j < permissions.length; j++) {
              
              if (permissions[j] === res.data[i].perms) {
                newArr.push(res.data[i]);
              }
            }
          }
          newArr.forEach((el) => {
            el.children.map((val, i) => {
              if (val.menuType == 3) {
                el.children.splice(i);
              }
              for (let i = 0; i < el.children.length; i++) {
                for (let j = 0; j < permissions.length; j++) {
                  if (permissions[j] === el.children[i].perms) {
                    _this.newArr1.push(el.children[i]);
                    _this.newArr2 = [...new Set(_this.newArr1)];
                  }
                }
              }
              let nArr = _this.newArr2.filter((currentValue, currentIndex, selfArr) =>{
                return selfArr.findIndex(x =>x.id === currentValue.id) === currentIndex
              });
              el.children = []
              el.children = nArr
            });
          });
          _this.menuInfo = newArr;
          _this.menuInfo.forEach(e=>{
            if(e.path == "/welcome") {
              if(menuLeft != 'menuDeaDolour') {
                e.icon1 = require('../../../images/home/leftNavigation/icon-home2.png')
              }else if (menuLeft == 'menuDeaDolour') {
                e.icon1 = require('../../../images/home-dark/leftNavigation/icon-home2.png')
              }
              e.icon2 = require('../../../images/home/leftNavigation/icon-home1.png')
            }
            if(e.path == "/synthesis") {
              if(menuLeft != 'menuDeaDolour') {
                e.icon1 = require('../../../images/home/leftNavigation/icon-synthesize2.png')
              }else if (menuLeft == 'menuDeaDolour') {
                e.icon1 = require('../../../images/home-dark/leftNavigation/icon-synthesize2.png')
              }
              e.icon2 = require('../../../images/home/leftNavigation/icon-synthesize1.png')
            }
            if(e.path == "/statistics") {
              if(menuLeft != 'menuDeaDolour') {
                e.icon1 = require('../../../images/home/leftNavigation/icon-statistics2.png')
              }else if (menuLeft == 'menuDeaDolour') {
                e.icon1 = require('../../../images/home-dark/leftNavigation/icon-statistics2.png')
              }
              e.icon2 = require('../../../images/home/leftNavigation/icon-statistics1.png')
            }
            if(e.path == "/lives") {
              let liveData = JSON.stringify(e);
              window.sessionStorage.setItem("liveData", liveData);
              if(menuLeft != 'menuDeaDolour') {
                e.icon1 = require('../../../images/home/leftNavigation/icon-live2.png')
              }else if (menuLeft == 'menuDeaDolour') {
                e.icon1 = require('../../../images/home-dark/leftNavigation/icon-live2.png')
              }
              e.icon2 = require('../../../images/home/leftNavigation/icon-live1.png')
            }
            if(e.path == "/third") {
              if(menuLeft != 'menuDeaDolour') {
                e.icon1 = require('../../../images/home/leftNavigation/icon-third2.png')
              }else if (menuLeft == 'menuDeaDolour') {
                e.icon1 = require('../../../images/home-dark/leftNavigation/icon-third2.png')
              }
              e.icon2 = require('../../../images/home/leftNavigation/icon-third1.png')
            }
            if(e.path == "/systemLayout") {
              if(menuLeft != 'menuDeaDolour') {
                e.icon1 = require('../../../images/home/leftNavigation/icon-configuration2.png')
              }else if (menuLeft == 'menuDeaDolour') {
                e.icon1 = require('../../../images/home-dark/leftNavigation/icon-configuration2.png')
              }
              e.icon2 = require('../../../images/home/leftNavigation/icon-configuration1.png')
            }
          })
        }
      })

    },
    onOpenChange(openKeys) {
      let latestOpenKey = openKeys.find(
        (key) => this.openKeys.indexOf(key) === -1
      );
      if (this.rootSubmenuKeys.indexOf(latestOpenKey) === -1) {
        this.openKeys = openKeys;
      } else {
        this.openKeys = latestOpenKey ? [latestOpenKey] : [];
      }
    },
    welCome() {
      this.$router.push("/welcome");
    },
    parentClick(path) {
      this.$router.push(path);
    },
    sonClick(path) {
      this.$router.push(path);
    },
    quit() {
      window.sessionStorage.clear();
      this.$store.commit("mutUserToken", "");
      this.$store.commit("mutUserInfo", {});
      this.$router.push("/");
    },
    backButLucency() {
      this.menuLeft = "menuLeft";
      this.principal = "principal";
      this.header = "header";
      this.daytime = require("../../../images/home/daytime1.png");
      this.night = require("../../../images/home/night.png");
    },
    backButDark() {
      this.menuLeft = "menuDeaDolour";
      this.principal = "prinDeaDolour";
      this.header = "headerDeaDolour";
      this.daytime = require("../../../images/home/daytime.png");
      this.night = require("../../../images/home/night1.png");
    },
    personalMessage(){
      this.$router.push('/personalMessage')
    }
  },
};
</script>

<style lang="scss" scoped>
.whole {
  width: 100vw;
  height: 100vh;
  min-height: 100vh;
  position: fixed;
  #components-layout-demo-top-side-2 {
    width: 100%;
    height: 100%;
    .header {
      height: 70px;
      background-color: #fff;
      display: flex;
      align-items: center;
      position: relative;
      z-index: 10;
      .contraction {
        position: absolute;
        //left: 23%;
        width: 50px;
        height: 100%;
      }
      .backBut {
        position: absolute;
        left: 25%;
      }
      .userMessage {
        display: flex;
        justify-content: center;
        align-items: center;
        position: absolute;
        right: 20px;
        .userImg {
          cursor: pointer;
          width: 24px;
          height: 24px;
          display: flex;
          background-image: url(../../../images/home/icon-quit.png);
          background-size: cover;
          background-size: 100% 100%;
        }
        .userImg:hover {
          background-image: url(../../../images/home/icon-quit2.png);
          background-size: cover;
          background-size: 100% 100%;
        }
        .userImgName {
          display: flex;
          margin-right: 20px;
          font-size: 16px;
          color: #8B8B8B;
          cursor: pointer;
          .name:hover {
            color: #1E7EFF;
          }
          .img {
            width: 36px;
            height: 36px;
            border-radius: 50%;
            margin-right: 10px;
            img {
              width: 100%;
              height: 100%;
              border-radius: 50%;
            }
          }
        }
      }
      .ADoris {
        position: absolute;
        left: 17px;
        cursor: pointer;
        div {
          // width: 372px;
          height: 52px;
          display: flex;
          align-items: center;
          img {
            width: 100%;
            height: 100%;
          }
        }
      }
      .a-but {
        margin-left: 50px;
      }
    }
    // 亮色
    .menuLeft {
      width: 100%;
      height: 100%;
      background-image: url(../../../images/home/bg-big.png);
      background-size: cover;
      background-size: 100% 100%;
      overflow-y: auto;
      .menuIcon {
        width: 13px;
        height: 14px;
        display: flex;
        margin-right: 10px;
        margin-left: -8px;
        img {
          width: 100%;
          height: 100%;
        }
      }
      .backgroundColor {
        position: absolute;
        width: 300px;
        height: 100%;
        left: 0;
        top: 0;
        background-color: rgb(230, 235, 237, 0.8);
      }
      .menuDiv {
        width: 300px;
        height: 100%;
        z-index: 10;
        padding-top: 10px;
        .aMenu {
          width: 100%;
          z-index: 10;
        }
      }
      .aMenuItem {
        font-family: MicrosoftYaHei-Bold;
        font-weight: normal;
        font-stretch: normal;
        letter-spacing: 0px;
        color: #5d77ad;
        display: flex;
        align-items: center;
        width: 260px;
        height: 60px;
        line-height: 60px;
      }
      .aMenuItem1 {
        font-family: MicrosoftYaHei-Bold;
        font-weight: normal;
        font-stretch: normal;
        letter-spacing: 0px;
        color: #5d77ad;
        display: flex;
        flex-direction: column;
        align-items: center;
        position: relative;
        span:nth-child(1) {
          position: absolute;
          left: 0;
          border-radius: 8px !important;
          margin: auto !important;
          font-family: MicrosoftYaHei-Bold !important;
          font-weight: normal !important;
          font-stretch: normal !important;
          letter-spacing: 0px !important;
          .aIcon {
            padding-left: 26px;
          }
        }
      }

      .ant-menu.ant-menu-dark .ant-menu-item-selected,
      .ant-menu-submenu-popup.ant-menu-dark .ant-menu-item-selected {
        width: 260px !important;
        height: 60px !important;
        background-color: #0078b6 !important;
        box-shadow: 0px 0px 20px 0px rgba(0, 120, 182, 0.6) !important;
        border-radius: 8px !important;
        margin: auto !important;
        line-height: 60px !important;
        font-family: MicrosoftYaHei-Bold !important;
        font-weight: normal !important;
        font-stretch: normal !important;
        letter-spacing: 0px !important;
        color: #ffffff !important;
      }
      .ant-menu.ant-menu-dark,
      .ant-menu-submenu-popup.ant-menu-dark {
        width: 260px !important;
        height: 60px !important;
        border-radius: 8px !important;
        margin: auto !important;
        line-height: 60px !important;
        background-color: none !important;
      }
    }
    .principal {
      position: absolute;
      padding-left: 300px;
      width: 100%;
      height: 100%;
      .routerView {
        padding-top: 80px;
        width: 100%;
        height: 100%;
        overflow-y: auto;
        background-color: rgb(255, 255, 255, 0.74);
      }
    }
    // 暗色
    .menuDeaDolour {
      width: 100%;
      height: 100%;
      background-image: url(../../../images/home/bg-big.png);
      background-size: cover;
      background-size: 100% 100%;
      overflow-y: auto;
      .menuIcon {
        width: 13px;
        height: 14px;
        display: flex;
        margin-right: 10px;
        margin-left: -8px;
        img {
          width: 100%;
          height: 100%;
        }
      }
      .backgroundColor {
        position: absolute;
        width: 300px;
        height: 100%;
        left: 0;
        top: 0;
        // background-color: rgba(63, 63, 63, 0.6);
        background-color: rgba(95, 93, 93, 0.795)
      }
      .menuDiv {
        width: 300px;
        height: 100%;
        z-index: 10;
        padding-top: 10px;
        .aMenu {
          width: 100%;
          z-index: 10;
        }
      }
      .aMenuItem {
        font-family: MicrosoftYaHei-Bold;
        font-weight: normal;
        font-stretch: normal;
        letter-spacing: 0px;
        color: #bebab7;
        display: flex;
        align-items: center;
        width: 260px;
        height: 60px;
        line-height: 60px;
      }
      .aMenuItem1 {
        font-family: MicrosoftYaHei-Bold;
        font-weight: normal;
        font-stretch: normal;
        letter-spacing: 0px;
        color: #bebab7;
        display: flex;
        flex-direction: column;
        align-items: center;
        position: relative;
        span:nth-child(1) {
          position: absolute;
          left: 0;
          border-radius: 8px !important;
          margin: auto !important;
          font-family: MicrosoftYaHei-Bold !important;
          font-weight: normal !important;
          font-stretch: normal !important;
          letter-spacing: 0px !important;
          .aIcon {
            padding-left: 26px;
          }
        }
      }

      .ant-menu.ant-menu-dark .ant-menu-item-selected,
      .ant-menu-submenu-popup.ant-menu-dark .ant-menu-item-selected {
        width: 260px !important;
        height: 60px !important;
        background-color: #2091bd !important;
        box-shadow: 0px 0px 20px 0px rgba(0, 120, 182, 0.6) !important;
        border-radius: 8px !important;
        margin: auto !important;
        line-height: 60px !important;
        font-family: MicrosoftYaHei-Bold !important;
        font-weight: normal !important;
        font-stretch: normal !important;
        letter-spacing: 0px !important;
        color: #ffffff !important;
      }
      .ant-menu.ant-menu-dark,
      .ant-menu-submenu-popup.ant-menu-dark {
        width: 260px !important;
        height: 60px !important;
        border-radius: 8px !important;
        margin: auto !important;
        line-height: 60px !important;
        background-color: none !important;
      }
    }
    .prinDeaDolour {
      position: absolute;
      padding-left: 300px;
      width: 100%;
      height: 100%;
      .routerView {
        padding-top: 80px;
        width: 100%;
        height: 100%;
        overflow-y: auto;
        background-color: rgba(196, 196, 196, 0.6);
      }
    }

    .logo {
      width: 120px;
      height: 31px;
      background: rgba(255, 255, 255, 0.2);
      margin: 16px 28px 16px 0;
      float: left;
    }
  }
}
</style>
<style>
ul {
  background-color: rgba(0, 0, 0, 0) !important;
  box-shadow: 0px 0px !important;
}

</style>